Интеграция ОС

Оптимизируйте свои подборки Сохраняйте и классифицируйте контент в соответствии со своими настройками.

Веб-приложения имеют большой охват. Они работают на нескольких платформах. Ими легко делиться по ссылкам. Но традиционно им не хватало интеграции с операционной системой. Не так давно их даже нельзя было установить. К счастью, это изменилось, и теперь мы можем воспользоваться этой интеграцией, чтобы добавить полезные функции в наши PWA. Давайте рассмотрим некоторые из этих вариантов.

Работа с файловой системой

Типичный рабочий процесс пользователя с использованием файлов выглядит следующим образом:

• Выберите файл или папку на устройстве и откройте их напрямую.
• Внесите изменения в эти файлы или папки и сразу же сохраните изменения.
• Создавайте новые файлы и папки.

До появления API доступа к файловой системе веб-приложения не могли этого делать. Открытие файлов требовало загрузки файлов, сохранение изменений требовало от пользователей их загрузки, а у веба вообще не было доступа для создания новых файлов и папок в файловой системе пользователя.

Открытие файла

Чтобы открыть файл, мы используем метод window.showOpenFilePicker() . Обратите внимание, что этот метод требует жеста пользователя, например нажатия кнопки. Вот остальная часть настройки для открытия файла:

1. Захватите дескриптор файла из API выбора файловой системы доступа. Это даст вам основную информацию о файле.
2. Используя метод getFile() дескриптора, вы получите особый вид Blob , называемый File , который включает дополнительные свойства только для чтения (такие как имя и дата последнего изменения) о файле. Поскольку это Blob, для него можно вызывать методы Blob, такие как text() , чтобы получить его содержимое.

// Have the user select a file.
const [ handle ] = await window.showOpenFilePicker();
// Get the File object from the handle.
const file = await handle.getFile();
// Get the file content.
// Also available, slice(), stream(), arrayBuffer()
const content = await file.text();

Сохранение изменений

Чтобы сохранить изменения в файле, также необходим жест пользователя; затем:

1. Используйте дескриптор файла для создания FileSystemWritableFileStream .
2. Внесите изменения в поток. Это не обновит файл на месте; вместо этого обычно создается временный файл.
3. Наконец, закончив вносить изменения, вы закрываете поток, что переводит изменения из временных в постоянные.

Давайте посмотрим на это в коде:

// Make a writable stream from the handle.
const writable = await handle.createWritable();
// Write the contents of the file to the stream.
await writable.write(contents);
// Close the file and write the contents to disk.
await writable.close();

Обработка файлов

API доступа к файловой системе позволяет открывать файлы из вашего приложения, но как насчет наоборот? Пользователи хотят установить свое любимое приложение в качестве приложения по умолчанию для открытия файлов. API обработки файлов — это экспериментальный API, который позволяет установленным PWA: регистрироваться в качестве обработчика файлов на устройстве пользователя, указывая тип MIME и расширение файла, поддерживаемые вашим PWA, в манифесте вашего веб-приложения. Вы можете указать пользовательские значки файлов для поддерживаемых вами расширений.

После регистрации установленный вами PWA будет отображаться как опция в файловой системе пользователя, позволяя открывать файл непосредственно в ней. Вот пример настройки манифеста для PWA для чтения текстовых файлов:

...
"file_handlers": [
     {
         "action": "/open-file",
         "accept": {
             "text/*": [".txt"]
         }
     }
]
...

Обработка URL-адресов

Благодаря обработке URL ваш PWA может захватывать ссылки, которые входят в его область действия, из операционной системы и отображать их в окне PWA, а не на вкладке браузера по умолчанию. Например, если вы получаете сообщение, ссылающееся на PWA, или нажимаете на глубокую ссылку (URL, указывающий на определенную часть контента) в вашем PWA, контент откроется в отдельном окне.

Это поведение автоматически доступно на Android при использовании WebAPK, например, когда пользователи устанавливают PWA с Chrome. Невозможно перехватить URL-адреса на PWA, установленных на iOS и iPadOS, из Safari.

Для настольных браузеров сообщество веб-браузеров создало новую спецификацию. Эта спецификация в настоящее время является экспериментальной ; она добавляет новый элемент файла манифеста: url_handlers . Это свойство ожидает массив источников, которые PWA хочет захватить. Источник вашего PWA будет предоставлен автоматически, и каждый другой источник должен принять эту обработку, работающую через файл с именем web-app-origin-association . Например, если манифест вашего PWA размещен на web.dev, и вы хотите добавить источник app.web.dev, это будет выглядеть так:

"url_handlers": [
    {"origin": "https://app.web.dev"},
]

В этом случае браузер проверит, существует ли файл по адресу app.web.dev/.well-known/web-app-origin-association , принимая обработку URL из URL области PWA. Разработчик должен создать этот файл. В следующем примере файл выглядит следующим образом:

{
    "web_apps": [
        {
            "manifest": "/mypwa/app.webmanifest",
            "details": {
                "paths": [ "/*" ]
            }
        }
    ]
}

Обработка URL-протокола

Обработка URL работает со стандартными URL-адресами протокола https , но можно использовать пользовательские схемы URI, такие как pwa:// . В нескольких операционных системах установленные приложения получают эту возможность, регистрируя свои схемы.

Для PWA эта возможность включается с помощью API обработчика URL-протокола , доступного только на настольных устройствах. Вы можете разрешить пользовательские протоколы только для мобильных устройств, распространяя PWA в магазинах приложений.

Для регистрации можно использовать метод registerProtocolHandler() или использовать член protocol_handlers в манифесте с желаемой схемой и URL-адресом, который вы хотите загрузить в контексте PWA, например:

...
{
  "protocol_handlers": [
    {
      "protocol": "web+pwa",
      "url": "/from-protocol?value=%s"
    },
  ]
}
...

Вы можете направить URL from-protocol на правильный обработчик и получить value строки запроса в вашем PWA. %s — это заполнитель для экранированного URL, который запустил операцию, поэтому если у вас есть ссылка где-то, например <a href="web+pwa://testing"> , ваш PWA откроет /from-protocol?value=testing .

Вызов других приложений

Вы можете использовать схемы URI для подключения к любому другому установленному приложению (PWA или нет) на устройствах пользователей на любой платформе. Вам просто нужно создать ссылку или использовать navigator.href и указать нужную схему URI, передавая аргументы в форме URL-экранирования.

Вы можете использовать общеизвестные стандартные схемы, такие как tel: для телефонных звонков, mailto: для отправки электронной почты или sms: для текстовых сообщений; или вы можете узнать о схемах URL-адресов других приложений, например, из общеизвестных приложений обмена сообщениями, карт, навигации, онлайн-встреч, социальных сетей и магазинов приложений.

Поделиться веб-сайтом

С помощью API Web Share ваше PWA может отправлять контент в другие установленные на устройстве приложения через общий канал.

API доступен только в операционных системах с механизмом share , включая Android, iOS, iPadOS, Windows и ChromeOS. Вы можете поделиться объектом, содержащим:

• Текст (свойства title и text )
• URL (свойство url )
• Файлы (свойство files ).

Чтобы проверить, может ли текущее устройство обмениваться простыми данными, такими как текст, вы проверяете наличие метода navigator.share() , чтобы обмениваться файлами, вы проверяете наличие метода navigator.canShare() .

Вы запрашиваете действие поделиться, вызывая navigator.share(objectToShare) . Этот вызов возвращает Promise, который разрешается с undefined или отклоняется с исключением.

Веб-целевой обмен

Web Share Target API позволяет вашему PWA быть целью операции обмена из другого приложения на этом устройстве, независимо от того, является ли оно PWA или нет. Ваш PWA получает данные, которыми поделилось другое приложение.

В настоящее время он доступен на Android с WebAPK и ChromeOS, и работает только после того, как пользователь установил ваш PWA. Браузер регистрирует цель совместного доступа в операционной системе при установке приложения.

Вы настраиваете цель общего доступа к веб-ресурсам в манифесте с помощью члена share_target , определенного в черновой спецификации цели общего доступа к веб-ресурсам . share_target устанавливается как объект с некоторыми свойствами:

action

URL-адрес, который будет загружен в окно PWA, которое, как ожидается, получит общие данные.

method

Для действия будет использоваться метод HTTP-глагола, например GET , POST или PUT .

enctype

(Необязательно) Тип кодировки для параметров по умолчанию — application/x-www-form-urlencoded , но его также можно установить как multipart/form-data для таких методов, как POST .

params

Объект, который сопоставляет данные общего доступа (из ключей: title , text , url и files из веб-ресурса) с аргументами, которые браузер передаст в URL (в method: 'GET' ) или в теле запроса, используя выбранную кодировку.

Например, вы можете определить для своего PWA, что вы хотите получать общие данные (только заголовок и URL), добавив в свой манифест:

...
"share_target": {
   "action": "/receive-share/",
   "method": "GET",
   "params": {
      "title": "shared_title",
      "url": "shared_url"
   }
}
...

Из предыдущего примера, если какое-либо приложение в системе делится URL с заголовком, и пользователь выбирает ваш PWA из диалогового окна, браузер создаст новую навигацию к /receive-share/?shared_title=AAA&shared_url=BBB вашего источника, где AAA — это общий заголовок, а BBB — общий URL. Вы можете использовать JavaScript, чтобы прочитать эти данные из строки window.location , проанализировав ее с помощью конструктора URL .

Браузер будет использовать имя и значок PWA из вашего манифеста для подачи записи общего ресурса операционной системы. Вы не можете выбрать другой набор для этой цели.

Более подробные примеры и инструкции по получению файлов см. в разделе Получение общих данных с помощью API Web Share Target.

Контактный выбор

С помощью API Contact Picker вы можете запросить у устройства отображение собственного диалога со всеми контактами пользователя, чтобы пользователь мог выбрать один или несколько. Затем ваш PWA может получать нужные вам данные от этих контактов.

API Contact Picker доступен в основном на мобильных устройствах, а на совместимых платформах все делается через интерфейс navigator.contacts .

Вы можете запросить доступные свойства с помощью navigator.contacts.getProperties() и запросить выборку одного или нескольких контактов со списком желаемых свойств.

Некоторые примеры свойств: name , email , address и tel . Когда вы просите пользователя выбрать один или несколько контактов, вы можете вызвать navigator.contacts.select(properties) , передав массив свойств, которые вы хотите получить в ответ.

В следующем примере будет представлен список контактов, полученных сборщиком.

async function getContacts() {
   const properties = ['name', 'email', 'tel'];
   const options = { multiple: true };
   try {
     const contacts = await navigator.contacts.select(properties, options);
     console.log(contacts);
   } catch (ex) {
     // Handle any errors here.
   }
}

Ресурсы

• API доступа к файловой системе: упрощение доступа к локальным файлам
• Пусть установленные веб-приложения будут обработчиками файлов
• Обработка файлов в прогрессивных веб-приложениях
• Интеграция с пользовательским интерфейсом OS Sharing с помощью API Web Share
• Делитесь контентом с другими приложениями
• Получение общих данных с помощью Web Share Target API
• Средство выбора контактов для Интернета